<template>
  <div class="children-app" >
    <div class="children-shop">
      <div class="children-shopitem" v-for="item in shopList">
        <img :src="item.imgSrc">
        <h3>{{item.name}}</h3>
        <h5>{{item.message}}</h5>
        <h1>{{item.price}}<span>元</span></h1>
        <el-button class="children-button" type="primary" size="small"@click="addshop(item)">立即购买</el-button>
      </div>
    </div>
  </div>

</template>

<script lang="ts" setup name="">
import {useRouter} from "vue-router";
import type {Product} from "@/type/product.ts";
import {group_t1Store} from "@/store/group_t1Store.ts";
let group_t1=group_t1Store();
let router=useRouter();
var shopList = group_t1.shopList;

function addshop(item:Product){
  router.push({
    name:'product',
    params:{id:item.id},
    query:{from:'group_t1'}
  });}
</script>

<style scoped>
.children-button{
  height: 30px;
  width: 90px;
  margin-left: 160px;
  margin-top: -75px;
}
h1 span{
  font-size: 12px;
  color: #181818;
  margin-left: 5px;
}
h1{
  margin-left: 5px;
  margin-top: -8px;
  color: #e41818;
}
h5{
  margin-left: 5px;
  color: rgba(0, 0, 0, 0.54);
}
h3{
  margin-left: 5px;
  font-weight: bold;
}
.children-shop{
  overflow: auto;
  margin-left: 120px;
  height: calc(100vh - 120px);
}
.children-shopitem{
  margin: 10px;
  width: 260px;
  height: 300px;
  box-shadow: 0 0 10px #ccc;
}
.children-shop img{
  width: 250px;
  height: 200px;
  margin: 5px;
}
.children-app{
  margin-top: -700px;
}
</style>